<div class="loginContainer">
  <div class="cil-i18n">
    <header-i18n showLangText="true" class="langs"></header-i18n>
  </div>
  <form nz-form [formGroup]="form" (ngSubmit)="submit()" role="form">
    <nz-alert
      *ngIf="error"
      [nzType]="'error'"
      [nzMessage]="error"
      [nzShowIcon]="true"
      class="mb-lg"
    ></nz-alert>
    <nz-form-item [nzFlex]="true" class="user">
      <nz-form-control class="aniuser">
        <!-- <label for="">用户名</label> -->
        <p>{{ 'USER.USERNAME' | i18n }}</p>
        <!-- nzPrefixIcon="anticon anticon-user" -->
        <nz-input-group nzSize="large">
          <input
            nz-input
            formControlName="userName"
            placeholder="{{ 'USER.USERNAME' | i18n }}"
          />
        </nz-input-group>
        <nz-form-explain>
          <ng-container *ngTemplateOutlet="errorTpl;context:{control:form.get('userName'), name:'userName'}"></ng-container>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item [nzFlex]="true">
      <nz-form-control class="anipass">
        <!-- <label for="">密码</label> -->
        <p>{{ 'USER.PASSWORD' | i18n }}</p>
        <!-- nzPrefixIcon="anticon anticon-lock" -->
        <nz-input-group nzSize="large">
          <input
            nz-input
            type="password"
            formControlName="password"
            placeholder="{{ 'USER.PASSWORD' | i18n }}"
          />
        </nz-input-group>
        <nz-form-explain>
          <ng-container *ngTemplateOutlet="errorTpl;context:{control:form.get('password'), name:'password'}"></ng-container>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <!--
    <nz-form-item class="code ">
      <nz-form-control class="aniCode">
        <p>{{ '验证码' |i18n }}</p>
        <nz-input-group nzSize="large" [nzAddOnAfter]="veriCodeImage">
          <input
            nz-input
            type="text"
            formControlName="veriCode"
            placeholder="{{ '验证码' | i18n }}"
            maxlength="4"
          />
        </nz-input-group>
        <nz-form-explain *ngIf="veriCode.dirty && veriCode.errors">
          {{ '请输入验证码' | i18n }}
        </nz-form-explain>
        <ng-template #veriCodeImage>
          <div class="veri-code-container" (click)="refreshVeriCode()">
            <img [src]="veriCodeURL" />
          </div>
        </ng-template>
      </nz-form-control>
    </nz-form-item>
    -->
    <!-- <nz-form-item class="remeber aniremeber">
      <nz-col [nzSpan]="20">
        <label nz-checkbox formControlName="remember">{{
          '记住我' | i18n
        }}</label>
      </nz-col>
      <nz-col [nzSpan]="12" class="text-right">
        <a class="forgot" (click)="msg.error('请联系管理员')">{{ 'app.login.forgot-password' | i18n }}</a>
      </nz-col>
    </nz-form-item> -->
    <nz-form-item class="anilogin">
      <button
        nz-button
        type="submit"
        class="login"
        nzSize="large"
        [nzLoading]="isLoading"
        nzBlock
      >
        {{ 'BTN.LOGIN' | i18n }}
      </button>
    </nz-form-item>
  </form>
  <div class="forget aniforget">
    <a class="forgot" (click)="forgotPassword()">
      {{ 'ACCOUNT.FORGET_PASSWORD' | i18n }}
    </a>
  </div>
</div>


<ng-template #errorTpl let-control="control" let-name="name">
  <ng-container *ngIf="control.dirty">
      <ng-container *ngIf="control.hasError('required'); else second">{{ errorTips[name]?.required | i18n }}</ng-container>
      <ng-template #second>
        <ng-container *ngIf="control.hasError('maxlength'); else third">{{ errorTips[name]?.maxlength | i18n }}</ng-container>
      </ng-template>
      <ng-template #third>
        <ng-container *ngIf="control.hasError('minlength'); else fourth">{{ errorTips[name]?.minlength | i18n }}</ng-container>
      </ng-template>
      <ng-template #fourth>
        <ng-container *ngIf="control.hasError('pattern'); ">{{ errorTips[name]?.pattern | i18n }}</ng-container>
      </ng-template>
  </ng-container>
</ng-template>